<template>
    <ElCard class="h-full flex flex-col min-h-0" body-class="flex flex-col min-h-0 flex-1 overflow-hidden">
        <template #header>
            <p class="text-center font-bold text-2xl">资源库</p>
        </template>
        <ElScrollbar class="flex-1">
            <ElTree :data="tree" :load="loadNode" lazy @node-click="nodeClick"
                :props="{ label: 'label', children: 'children', isLeaf: 'isLeaf' }" class="flex-1" />
        </ElScrollbar>
    </ElCard>
</template>

<script setup lang="ts">
import { getFirstDirCont, getFistDir, getSecondDir, getSecondDirCont } from '@/api/function';
import { ElCard, ElTree, ElScrollbar } from 'element-plus';
import { onMounted, ref } from 'vue';

const tree = ref<any[]>([]);

// 初始化：只加载根节点（一级目录）
onMounted(async () => {
    const firstDirs = (await getFistDir()).data;
    tree.value = firstDirs.map((item: any) => ({
        id: item.id,
        label: item.name,
        type: 'firstDir', // 标记类型，便于后续加载
        isLeaf: false, // 非叶子节点，可展开
        children: [] // 占位，实际内容懒加载
    }));
});

// 懒加载函数：Element Plus Tree 会在节点展开时调用
const loadNode = async (node: any, resolve: (children: any[]) => void) => {
    const data = node.data;

    // 如果是根节点（一级目录），加载其子节点（二级目录 + 一级内容）
    if (data.type === 'firstDir') {
        try {
            // 并行请求二级目录和一级内容
            const [secondRes, firstContRes] = await Promise.all([
                getSecondDir(data.id),
                getFirstDirCont(data.id)
            ]);

            const children: any[] = [];

            // 添加二级目录
            const secondDirs = secondRes.data;
            secondDirs.forEach((secItem: any) => {
                children.push({
                    id: secItem.id,
                    label: secItem.name,
                    type: 'secondDir',
                    isLeaf: false, // 默认非叶子，点击时再加载内容
                    parentId: data.id,
                    children: [] // 占位
                });
            });

            // 添加一级目录下的内容（叶子节点）
            const firstCont = firstContRes.data;
            firstCont.forEach((contItem: any) => {
                children.push({
                    label: contItem.title,
                    link: contItem.link,
                    isLeaf: true, // 叶子节点，不可展开
                    type: 'content'
                });
            });

            resolve(children);
        } catch (error) {
            console.error('加载一级目录子节点失败:', error);
            resolve([]);
        }
    }

    // 如果是二级目录，加载其内容
    else if (data.type === 'secondDir') {
        try {
            const secondCont = (await getSecondDirCont(data.id)).data;
            const children = secondCont.map((contItem: any) => ({
                label: contItem.title,
                link: contItem.link,
                isLeaf: true,
                type: 'content'
            }));
            resolve(children);
        } catch (error) {
            console.error('加载二级目录内容失败:', error);
            resolve([]);
        }
    }

    // 内容节点（叶子）无需加载
    else {
        resolve([]);
    }
};

// 点击节点：如果是内容节点，打开链接
function nodeClick(data: any) {
    if (data.link) {
        window.open(data.link, '_blank');
    }
}
</script>

<style scoped></style>